<template>
  <div class="">
    <myHeader @isShowFlag="isShowFlag"></myHeader>

    <transition-group
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__backInRight"
      leave-active-class="animate__backOutRight"
    >
      <list v-for="(v, i) in obj" :key="i" :item="v"></list>
    </transition-group>

    <bottom></bottom>

    <transition-group
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__backInRight"
      leave-active-class="animate__backOutRight"
    >
      <div style="display:none;" :class="{ right: true }" v-show="flag">
        <p>关键字搜索</p>
        <div class="search">
          <u
            :class="v == flagIndex ? 'active' : ''"
            @click="filterList(v, i)"
            v-for="(v, i) in list"
            :key="i"
            >{{ v }}</u
          >
        </div>
        <div class="button">
          <button @click="isShow">取消</button>
          <button @click="fileterBtnok">确定</button>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import "animate.css";
import myHeader from "../components/myHeader.vue";
import list from "../components/list.vue";
import bottom from "../components/bottom.vue";

import { computed, ref, reactive } from "vue";
import { useStore } from "vuex";
export default {
  setup(props) {
    let store = useStore();
    let obj = computed(() => store.state.filterObj);
    let flag = ref(false);
    let flagi = ref(true);

    let flagIndex = ref("");
    let list = reactive(["海信", "海尔", "山水", "美的"]);
    store.dispatch("dataList");

    function isShow() {
      flag.value = false;
    }

    function isShowFlag() {
      flag.value = true;
    }
    function filterList(v, i) {
      // if (flagi.value) {
      //   flagIndex.value = i;
      //   flagi.value = false;
      // } else if (flagi.value == false) {
      //   flagIndex.value = -1;
      //   flagi.value = true;
      // }
      if (flagIndex.value == v) {
        flagIndex.value = "";
      } else {
        flagIndex.value = v;
      }

      store.commit("filterList", v);
    }

    function fileterBtnok() {
      flag.value = false;
      store.commit("fileterBtnok");
    }
    return {
      store,
      obj,
      isShow,
      flag,
      isShowFlag,
      list,
      filterList,
      flagIndex,
      fileterBtnok,
      flagi,
    };
  },

  components: {
    myHeader,
    list,
    bottom,
  },
};
</script>

<style lang="scss" scoped>
.right {
  width: 50%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  top: 0;
  right: 0;
}
u {
  margin: 10px;
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  display: inline-block;

  background-color: #ccc;
}
.active {
  border: 2px solid rgb(23, 136, 201);
}
</style>
